<template>
	<div class="form-i18n-container">
		<el-card shadow="hover" header="表单国际化演示(不适用于动态项 form-item)">
			<div style="text-align: center; margin-top: 15px">
				<el-radio-group v-model="radio" size="small" @change="onRadioChange">
					<el-radio-button label="zh-cn">中文简体</el-radio-button>
					<el-radio-button label="en">英文</el-radio-button>
					<el-radio-button label="zh-tw">中文繁体</el-radio-button>
				</el-radio-group>
			</div>
			<el-form :model="form" size="small" label-width="100px" class="mt35 mb35">
				<el-row :gutter="35">
					<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8" class="mb20">
						<el-form-item :label="$t('message.formI18nLabel.name')">
							<el-input v-model="form.name" :placeholder="$t('message.formI18nPlaceholder.name')" clearable></el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8" class="mb20">
						<el-form-item :label="$t('message.formI18nLabel.email')">
							<el-input v-model="form.email" :placeholder="$t('message.formI18nPlaceholder.email')" clearable></el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8" class="mb20">
						<el-form-item :label="$t('message.formI18nLabel.autograph')">
							<el-input v-model="form.autograph" :placeholder="$t('message.formI18nPlaceholder.autograph')" clearable></el-input>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
		</el-card>
	</div>
</template>

<script lang="ts">
import { toRefs, reactive, defineComponent, getCurrentInstance } from 'vue';
export default defineComponent({
	name: 'pagesFormI18n',
	setup() {
		const { proxy } = getCurrentInstance() as any;
		const state = reactive({
			radio: 'zh-cn',
			form: {},
		});
		// 单选框改变时
		const onRadioChange = () => {
			proxy.$i18n.locale = state.radio;
		};
		return {
			onRadioChange,
			...toRefs(state),
		};
	},
});
</script>
